<template>
  <div class="UAV-container">
    <div class="UAV-container-box">
      <div>
        <el-select
            v-model="UAVplane"
            placeholder="请选择"
            size="large"
            style="width: 240px"
            @change="UAVChange"
        >
          <el-option
              v-for="item in UAVList"
              :key="item.id"
              :label="item.airportName"
              :value="item.id"
          />
        </el-select>
      </div>
      <div class="container-content">
<!--        <div class="UAV-video">-->
<!--          <video id="UAVVideo" muted autoplay controls></video>-->
<!--        </div>-->
        <div class="UAV-map-box">
          <div id="map"></div>
        </div>
        <div class="map-card" v-if="isShowCard">
          <div style="display: flex;justify-content: end;cursor: pointer;" @click="closebtn">X</div>
          <div>
            <span>机场名称： </span>
            <span>{{ UAVData.airportName }}</span>
          </div>
          <div>
            <span>时间： </span>
            <span>{{ UAVData.createTime }}</span>
          </div>
        </div>
      </div>
<!--      <div class="container-footer">-->

<!--      </div>-->
    </div>
  </div>
</template>
<script setup>
import flvjs from "flv.js";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import { getAirportListApi } from "@/api/UAVMap/uavmap"

const flvPlayer = ref(null);
let UAVMap = ref(null);
let longitude = ref("");
let latitude = ref("");
const UAVplane = ref("");
const isShowCard = ref(false);
const UAVList = ref([]);
const UAVData = ref({});
let circle = null;
let demoList = [
    [120.085812, 30.224488],
    [120.131759, 30.213393],
    [120.137846, 30.246567]
]
let demoList2 = [
  [120.09853, 30.250925],
  [120.120551, 30.223169],
  [120.154386, 30.22959]
]
const initMap = () => {
  UAVMap = new AMap.Map("map", {
    pitchEnable: false,
    zoom: 14,
    pitch: 35,
    rotation: 45,
    resizeEnable: true,
    viewMode: "3D",
    zooms: [2, 20],
    center: [120.14819, 30.245953],
    mapStyle: "amap://styles/fresh",
  });

  // 获取地图上点击的经纬度
  UAVMap.on("click", function (e) {
    longitude = e.lnglat.lng;
    latitude = e.lnglat.lat;
    console.log(longitude, latitude);

  });
}

const UAVChange = (id) => {
  isShowCard.value = false;
  var data = UAVList.value.find(item => item.id === id)
  UAVData.value = data;
  drawUAVCircle(data);
}
/*
* 绘制圆形机场区域
* */
const drawUAVCircle = (data) => {
  if (circle)  UAVMap.remove(circle);
  var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [data.latitude, data.longitude]
  });
  UAVMap.add(marker)
  circle = new AMap.Circle({
    center: [data.longitude, data.latitude], // 圆心位置
    radius: data.boundaryPosition != null ? data.boundaryPosition.radius : 100,  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35 //填充透明度
  });
  UAVMap.add(circle);
  UAVMap.setFitView([circle]);

  // 区域点击事件
  circle.on("click", (event) => {
    isShowCard.value = !isShowCard.value;
  });
}

const closebtn = () => {
  isShowCard.value = false;
}

const getAirportList = () => {
  getAirportListApi().then(res => {
    if (res.code === 200) {
      UAVList.value = res.data;
    }
  })
}

const calculateArea = () => {
  var result = AMap.GeometryUtil.ringRingClip(demoList, demoList2)
}

onMounted(() => {
  initMap();
  getAirportList();
  // calculateArea();
})
</script>
<style lang="scss" scoped>
.UAV-container{
  width: 100%;
  height: 100%;
  padding: 0 20px 20px;

  .UAV-container-box{
    width: 100%;
    height: 94%;
    border-radius: 5px;
    background: #FFFFFF;
    overflow: hidden;
    padding: 20px;
  }

  .container-content{
    width: 100%;
    height: 92%;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;

    .UAV-video{
      width: 50%;
      height: 100%;

      #UAVVideo{
        width: 100%;
        height: 100%;
      }
    }

    .UAV-map-box{
      width: 100%;
      height: 100%;

      #map {
        width: 95%;
        height: 80%;
        position: absolute;
      }
    }

    .map-card{
      position: absolute;
      width: 200px;
      height: 300px;
      right: 40px;
      background: #ffffff;
    }
  }

  .container-footer{
    border: 1px red solid;
    width: 100%;
    height: 30%;
  }

}
</style>